import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../../actions/openLesson';
import Audio from '../../../components/audio/index';
import Video from '../../../components/video/index';
import style from './style.css';

@connect(
  (state, props) => ({
    openLesson: state.openLesson,
  }), actions
)
export default class app extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const openId = location.hash.slice('#/open/lesson/'.length) || '';
    this.props.getData(openId);
  }

  renderText(item) {
    const { avatar } = this.props.openLesson;
    return (
      <div className={style.box} key={item.id}>
          <div className={style.avatar}>
            <img
              src={avatar || `http://owb31aecn.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171015170049.jpg?nsukey=ZhNX1UO8NceOaw5%2FeRugFDfSah9NTlqCLR%2Bv7fJpWuUxpiKURe6mPpCZFTygji1O6qU8unR5LuSLWGUmo%2FFpv4xG6bSufqbC1IaxobiUXo32%2FLWcaz6%2F3Y%2F6ssPf73Shck3bhfjYP5PIo5iOhq3MLh%2F%2FcZKwAjAJ8SyVMPTPNWI%3D`} />
          </div>
          <div className={style.container}>
            <div className={style.content}>
              {item.content.split(/\n/mg).map((text, index) =>
                <p key={index}>{text}</p>
              )}
            </div>
          </div>
        </div>
    );
  }

  renderTitle(item) {
    return (
      <div className={style.title_box} key={item.id}>
          <div className={style.hr_title}>{item.content}</div>
      </div>
    );
  }

  renderPic(item) {
    return (
      <div className={style.box} key={item.id}>
          <div className={style.img_box}>
            <img src={item.content} />
          </div>
        </div>
    );
  }

  renderAudio(item) {
    const { avatar } = this.props.openLesson;
    return (
      <div className={style.box} key={item.id}>
          <div className={style.avatar}>
              <img
                src={avatar || `http://owb31aecn.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171015170049.jpg?nsukey=ZhNX1UO8NceOaw5%2FeRugFDfSah9NTlqCLR%2Bv7fJpWuUxpiKURe6mPpCZFTygji1O6qU8unR5LuSLWGUmo%2FFpv4xG6bSufqbC1IaxobiUXo32%2FLWcaz6%2F3Y%2F6ssPf73Shck3bhfjYP5PIo5iOhq3MLh%2F%2FcZKwAjAJ8SyVMPTPNWI%3D`} />
          </div>
          <div className={style.container}>
            <div className={style.content}>
              <Audio id={item.id} src={item.content} />
            </div>
          </div>
        </div>
    );
  }

  renderVideo(item) {
    return (
      <div className={style.box} key={item.id}>
          <div className={style.video_box}>
            <Video id={item.id} src={item.content} />
          </div>
        </div>
    );
  }

  renderByType() {
    const { content } = this.props.openLesson;
    return content && content.map((item) => {
        switch (item.type) {
          case 1:
            return this.renderText(item);
          case 2:
            return this.renderPic(item);
          case 3:
            return this.renderAudio(item);
          case 4:
            return this.renderVideo(item);
          case 5:
            return this.renderTitle(item);
          default:
            break;
        }
      });
  }

  render() {
    const { openLesson } = this.props;
    return (
      <div className={style.open}>
        <div className={style.banner}></div>
        <div className={style.title}>{openLesson.name}</div>

        {
          !openLesson.error && openLesson.content.length === 0
            ?
            <div className={style.middle}>加载中...</div>
            : this.renderByType()
        }

        {
          openLesson.error
            ?
            <div className={style.middle}>此二维码已经过期</div>
            : null
        }

      </div>
    )
  }
}
